<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./common.css">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2719390_m3a8uef5wi.css">
    <title>Document</title>
</head>

<body>
    <!-- top开始 -->
    <div class="top">
        <div class="content">
            <div class="left">
                <ul>
                    <li>教育商店首页<span>｜</span></li>
                    <li>退出商店</li>
                </ul>
            </div>
            <div class="right">
                <span>&lt;广告&gt;</span>
            </div>
        </div>
    </div>
    <!-- top结束 -->

    <!-- nav开始 -->
    <div class="nav">
        <div class="nav_content">
            <ul>
                <li class="iconfont icon-pingguo"></li>
                <li>商店</li>
                <li>Mac</li>
                <li>iPad</li>
                <li>iPhone</li>
                <li>Watch</li>
                <li>Music</li>
                <li>技术支持</li>
                <li class="iconfont icon-sousuo"></li>
                <li class="iconfont icon-gouwudai"></li>
            </ul>
        </div>
    </div>
    <!-- nav结束 -->
    <!-- 产品展示开始 -->
    <div class="pro">
        <div class="pro_content">
            <ul>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">MacBook Air</p>
                </li>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">MacBook Pro 13 英寸</p>
                </li>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">MacBook Pro 16 英寸</p>
                </li>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">iMac 24 英寸</p>
                    <p class="status">新款</p>
                </li>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">iMac 27 英寸</p>
                </li>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">Mac Pro</p>
                </li>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">Mac mini</p>
                </li>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">机型比较</p>
                </li>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">Pro Display XDR</p>
                </li>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">配件</p>
                </li>
                <li>
                    <div class="img iconfont icon-diannao1"></div>
                    <p class="dec">Big Sur</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 产品展示结束 -->
    <!-- 广告开始 -->
    <div class="advertising">
        <p>购买 MacBook Air 可享最高 24 期免息分期，仅 RMB 333/月起*。<span>立即选购&nbsp;&gt;</span></p>
    </div>
    <!-- 广告结束 -->
    <!-- iMac开始 -->
    <div class="iMac">
        <div class="iMac_content">
            <p class="status">新款</p>
            <h1 class="name">iMac</h1>
            <h3 class="flag">新开篇</h3>
            <p class="price">RMB 9999 起</p>
            <div class="btn">购买</div>
            <p class="details">进一步了解&nbsp;&gt;</p>
            <div class="img">
                <img src="../hero_imac_24__eq5phrdpwjyq_large_2x.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- iMac结束 -->
    <!-- 适合你的mac开始 -->
    <div class="type">
        <div class="type_content">
            <h2>哪款 Mac 适合你?</h2>
            <div class="details"> 比较各款 Mac 机型 &gt;</div>
            <div class="tag">
                <span>笔记本电脑</span>
                <span>台式电脑</span>
            </div>
            <div class="pro">
                <div class="box1">
                    <div class="photo">
                        <img src="../企业微信20210809-164733@2x.png" alt="">
                    </div>
                    <h3>MacBook Air</h3>
                    <p>RMB 9999 起</p>
                    <div class="icon">
                        <img src="../企业微信20210809-165125@2x.png" alt="">
                    </div>
                </div>
                <div class="box2"></div>
                <div class="box3"></div>
            </div>
        </div>
    </div>
    <!-- 适合你的mac结束 -->
    <div class="preferential">
        <div class="pic">
            <div class="item1">
                <h1>为高校生活 购买 Mac，AirPods 搭配其中。</h1>
                <p style="margin-top: 2em;color: darkblue;"> 教育优惠省更多 &gt;</p>
            </div>
            <div class="item2">
                <img width="100%" height="100%" src="../flp_mac_family__bp82711ad22u_large_2x.png" alt="">
            </div>
        </div>
    </div>
    <!-- 适合你的mac结束 -->
    <!-- 配件开始 -->
    <div class="parts">
        <div class="content">
            <div class="item1">
                <h2>配件</h2>
                <h1>探索 Mac 精彩配件。</h1>
                <div class="btn">选购</div>
                <div class="goods">
                    <img width="100%" height="100%" src="../accessories_tile__br8gsosiziuq_large_2x.jpg" alt="">
                </div>
            </div>
            <div class="item2">
                <h2>Apple Trade In 换购计划</h2>
                <h1>换购新 Mac，</h1>
                <h1>享受折抵优惠。</h1>
                <p>你可用符合条件的电脑来获得折抵优惠，也可选择免费回收处理。</p>
                <p>这样一来，你受益，地球也受益9。</p>
                <p class="link">了解你设备的折抵金额 &gt;</p>
                <div class="goods">
                    <img width="100%" height="100%" src="../trade_in_mac_tile__f5rx9jv08geq_large_2x.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 配件结束 -->
</body>

</html>